<template>
	<div>
		<div style="height: 100px;">
			<div @dragover="dragover" @dragleave="dragleave" @drop="drop"
				class="border-primary border h-100 bg-white d-flex justify-content-center">

				<label v-if="isUping" class="m-0 p-0 text-center bg-primary w-100">
					<Icon class="text-white" size="56" type="md-cloud-upload" />
					<div class="text-white">松开按住的手指完成上传</div>
				</label>
				<label v-else class="m-0 p-0 text-center w-100" :for="'filfileBSe'">
					<Icon class="text-primary" size="56" type="md-add" />
					<div class="text-primary">点击或拖拽文件进行上传</div>
				</label>
				<input class="d-none" type="file" @change="changeFile($event)" :id="'filfileBSe'" />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {

		},
		data: function() {
			return {
				isUping: false,
				codes: [],
				code: "",
			};
		},
		mounted: function() {

		},
		methods: {
			dragover: function(e) {
				e.preventDefault();
				this.isUping = true;
			},
			dragleave: function(e) {
				e.preventDefault();
				this.isUping = false;
			},
			drop: function(e) {
				e.preventDefault();
				this.isUping = false;
				if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
					this.loadFile(e.dataTransfer.files[0]);
				}
			},
			changeFile: function(event) {
				console.log(event.target.files);
				if (event.target.files && event.target.files.length > 0) {
					this.loadFile(event.target.files[0]);
				}
			},
			loadFile: function(file) {
				if (file.type === "text/plain") {
					const reader = new FileReader();
					reader.onload = e => {
						const content = e.target.result;
						// 处理文件内容
						this.$emit("success", content);
						
					};
					reader.onerror = function(e) {
						console.error("读取文件时发生错误:", e.target.error);
					};
					reader.readAsText(file);
				} else {
					this.message.error("只能上传文本文件！");
					return;
				}
			}
		}
	}
</script>

<style>
</style>